<template>
  <div class="container">
    <!-- 标题 -->
    <h3 class="title">{{ newInfo.title }}</h3>
    <!-- 信息 -->
    <p class="info">
      <span>发布时间: {{ newInfo.add_time | dateFormat }}</span>
      <span>点击次数: {{ newInfo.click }}</span>
    </p>
    <hr>
    <!-- 内容 -->
    <div class="content" v-html="newInfo.content"></div>
    <!-- 评论子版块内容, 通过组件传值 -->
    <comment :newsId="id"></comment>
  </div>
</template>

<script>
/** 引入公共子组件 - 评论组件 **/
import Comment from "../common/Comment.vue";

export default {
  data(){
    return {
      newInfo: {} // 新闻内容
    }
  },
  created() {
    this.getNewInfo();
  },
  methods: {
    async getNewInfo(){
      const { data } = await this.$http.get("/api/getnew/" + this.id);
      if( data.status === 0 ) this.newInfo = data.message[0];
      else alert("请求失败, 请刷新重试");
    }
  },
  /* 通过路由配置传参, 接收地址栏上的id信息
    注意: 要和地址栏的占位符相同, 否则接收不到参数
  */
  props: [
    "id"
  ],
  components: {
    Comment // 将子组件挂到该Vue
  }
}
</script>

<style lang="scss" scoped>
  .container{
    /* 容器内边距, 设置左右 */
    padding: 0px 5px;
    .title{
      font-size: 15px;
      text-align: center;
      color: red;
      /* 外边距, 设置上下 */
      margin: 15px 0px;
    }
    .info{
      color: #0062cc;
      /* 弹性盒模型 */
      display: flex;
      justify-content: space-between;
    }
  }
</style>